//智能验证
<template>
  <div id="sc"></div>
</template>
<script>
  export default {
    name: 'intellect-check',
    data() {
      return {

      }
    },
    created() {

    },
    mounted() {
      //新版app交互js
      document.getElementById('nvc') && document.getElementById('nvc').remove()
      var hm = document.createElement('script')
      hm.src = '//g.alicdn.com/sd/nvc/1.1.112/guide.js'
      hm.id = 'nvc'
      var s = document.getElementsByTagName('script')[0]
      s.parentNode.insertBefore(hm, s)
      hm.onload = hm.onreadystatechange = function () {
        if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
          var ic = new window.smartCaptcha({
            //声明智能验证需要渲染的目标元素ID。
            renderTo: '#sc',
            //智能验证组件的宽度。
            width: 300,
            //智能验证组件的高度。
            height: 42,
            //智能验证组件初始状态文案。
            default_txt: '点击按钮开始智能验证',
            //智能验证组件验证通过状态文案。
            success_txt: '验证成功',
            //智能验证组件验证失败（拦截）状态文案。
            fail_txt: '验证失败，请在此点击按钮刷新',
            //智能验证组件验证中状态文案。
            scaning_txt: '智能检测中',
            //前端智能验证通过时会触发该回调参数。您可以在该回调参数中将请求标识（token）、会话ID（sessionid）、签名串（sig）字段记录下来，随业务请求一同发送至您的服务端调用验签。
            success: function (data) {
              console.log('###########智能验证##########')
              console.log(window.NVC_Opt.token)
              console.log(data.sessionId)
              console.log(data.sig)
              console.log('############################')
            },
            fail: function () {
              console.log('ic error')
            }
          })
          ic.init()
        }
        hm.onload.onload = hm.onreadystatechange = null //删除事件处理函数。
      }
    },
    methods: {
      init() {
        window.NVC_Opt = {
          //应用类型标识。它和使用场景标识（scene字段）一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
          appkey: 'CF_APP_1',
          //使用场景标识。它和应用类型标识（appkey字段）一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。
          scene: 'nvc_register',
          //声明二次验证需要渲染的目标元素ID。
          renderTo: '#captcha',
          //业务键字段，可为空。该参数可用于上线前测试，请按照代码集成后测试部分中的方法配置该字段值。
          trans: {
            'key1': 'code0',
            'nvcCode': 200
          },
          //当唤醒刮刮卡验证作为二次验证时，配置需要刮出的两个elements的图片资源。
          elements: [
            '//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png',
            '//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png'
          ],
          //当唤醒刮刮卡验证作为二次验证时，配置刮动时的背景图像（自动应用平铺填充的方式）。
          bg_back_prepared: '//img.alicdn.com/tps/TB1skE5SFXXXXb3XXXXXXXXXXXX-100-80.png',
          //当唤醒刮刮卡验证作为二次验证时，配置刮动时的前景图像（仅支持base64数据流）。
          bg_front: '',
          //当唤醒刮刮卡验证作为二次验证时，配置验证通过时显示的图标资源。
          obj_ok: '//img.alicdn.com/tfs/TB1rmyTltfJ8KJjy0FeXXXKEXXa-50-74.png',
          //当唤醒刮刮卡验证作为二次验证时，配置验证通过时显示的背景图像（自动应用平铺填充的方式）。
          bg_back_pass: '//img.alicdn.com/tfs/TB1KDxCSVXXXXasXFXXXXXXXXXX-100-80.png',
          //当唤醒刮刮卡验证作为二次验证时，配置验证失败或异常时显示的图标资源。
          obj_error: '//img.alicdn.com/tfs/TB1q9yTltfJ8KJjy0FeXXXKEXXa-50-74.png',
          //当唤醒刮刮卡验证作为二次验证时，配置验证失败或异常时显示的背景图像（自动应用平铺填充的方式）。
          bg_back_fail: '//img.alicdn.com/tfs/TB1w2oOSFXXXXb4XpXXXXXXXXXX-100-80.png',
          //当唤醒刮刮卡验证作为二次验证时，用于自定义文案。详细配置方法请参见自定义文案文档。
          upLang: {
            'cn': {
              _ggk_guide: '请摁住鼠标左键，刮出两面盾牌',
              _ggk_success: '恭喜您成功刮出盾牌<br />继续下一步操作吧',
              _ggk_loading: '加载中',
              _ggk_fail: ['呀，盾牌不见了<br />请', 'javascript:noCaptcha.reset()', '再来一次', '或',
                'http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN', '反馈问题'
              ],
              _ggk_action_timeout: ['我等得太久啦<br />请', 'javascript:noCaptcha.reset()', '再来一次', '或',
                'http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN', '反馈问题'
              ],
              _ggk_net_err: ['网络实在不给力<br />请', 'javascript:noCaptcha.reset()', '再来一次', '或',
                'http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN', '反馈问题'
              ],
              _ggk_too_fast: ['您刮得太快啦<br />请', 'javascript:noCaptcha.reset()', '再来一次', '或',
                'http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN', '反馈问题'
              ]
            }
          }
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  #__nc {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    height: 100px;
    padding-top: 100px;
  }
</style>